<template>
  <el-container class="admin-container">
    <el-container>
      <!-- 主内容区域 -->
      <el-main class="admin-main">
        <!-- 统计卡片区域 -->
        <div class="stats-cards">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">Online Review</div>
              <div class="stat-value">¥2,766</div>
            </div>
            <div class="stat-icon"><el-icon><money /></el-icon></div>
          </el-card>

          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">New Customers</div>
              <div class="stat-value">3,223</div>
            </div>
            <div class="stat-icon"><el-icon><user-plus /></el-icon></div>
          </el-card>

          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">Active Projects</div>
              <div class="stat-value">252</div>
            </div>
            <div class="stat-icon"><el-icon><s-management /></el-icon></div>
          </el-card>

          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">Referrals</div>
              <div class="stat-value">4,300</div>
            </div>
            <div class="stat-icon"><el-icon><shopping-cart /></el-icon></div>
          </el-card>
        </div>

        <!-- 图表和表格区域 -->
        <div class="content-grid">
          <!-- 图表卡片 -->
          <el-card class="content-card chart-card">
            <div class="card-header">
              <h2 class="card-title">Yearly Sales</h2>
              <div class="chart-legend">
                <el-tag type="primary" size="small"><span class="legend-dot food-dot"></span> Food</el-tag>
                <el-tag type="success" size="small"><span class="legend-dot clothes-dot"></span> Clothes</el-tag>
                <el-tag type="warning" size="small"><span class="legend-dot electronics-dot"></span> Electronics</el-tag>
              </div>
            </div>
            <div class="chart-container">
              <el-divider content-position="left">2011</el-divider>
              <div class="chart-data">
                <div class="chart-values">
                  <div class="chart-value-item">Food: 354</div>
                  <div class="chart-value-item">Clothes: 387</div>
                  <div class="chart-value-item">Electronics: 337</div>
                </div>
                <div id="salesChart" class="chart-area"></div>
              </div>
            </div>
          </el-card>

          <!-- 右侧信息卡片 -->
          <div class="right-cards">
            <el-card class="content-card weather-card">
              <div class="weather-info">
                <div class="temperature">23°</div>
                <div class="weather-icon">
                  <!-- <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="Weather icon"> -->
                </div>
                <div class="location">龙岩</div>
              </div>
            </el-card>

            <el-card class="content-card quote-card">
              <div class="quote-text">I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.</div>
              <div class="quote-author">- John Doe</div>
              <div class="quote-role">Graphic Designer</div>
            </el-card>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import {
  Money,
  Plus as UserPlus,
  Setting as SManagement,
  ShoppingCart
} from '@element-plus/icons-vue'

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('salesChart');
  if (!chartDom) return;

  const chart = echarts.init(chartDom);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025']
    },
    yAxis: {
      type: 'value',
      max: 600
    },
    series: [
      {
        name: 'Food',
        type: 'line',
        data: [240, 300, 320, 340, 320, 360, 330, 350],
        lineStyle: {
          color: '#909399'
        }
      },
      {
        name: 'Clothes',
        type: 'line',
        data: [420, 380, 350, 340, 360, 400, 380, 420],
        lineStyle: {
          color: '#E6A23C'
        }
      },
      {
        name: 'Electronics',
        type: 'line',
        data: [280, 320, 300, 340, 380, 420, 380, 360],
        lineStyle: {
          color: '#67C23A'
        }
      }
    ]
  };

  option && chart.setOption(option);

  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 生命周期钩子
onMounted(() => {
  initChart();
});
</script>

<style scoped>
@import url('../styles/dashboard.css');
</style>